<template>
  <view class="cart">
    <!-- 列表 -->
    <view class="cart-list">
      <view
        class="cart-item"
        v-for="(item, index) in cartList"
        :key="item.goods_id"
      >
        <!-- 复选框 -->
        <view class="cart-chk">
          <checkbox-group @change="onGoodsCheck(index)">
            <checkbox :checked="item.checked"></checkbox>
          </checkbox-group>
        </view>
        <!-- 商品图片 -->
        <view class="cart-img">
          <image mode="widthFix" :src="item.goods_small_logo"></image>
        </view>
        <!-- 商品详情 -->
        <view class="cart-detail">
          <view class="cart-goods-name u-line-2">{{ item.goods_name }}</view>
          <view class="cart-goods-info">
            <view class="goods-price">¥{{ item.goods_price }}</view>
            <view class="goods-num-tool">
              <view class="num-change" @click="onNumsChange(index, -1)">-</view>
              <view class="num-value">{{ item.nums }}</view>
              <view class="num-change" @click="onNumsChange(index, 1)">+</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 购物车栏 -->
    <view class="cart-tool">
      <!-- 全选 -->
      <view class="all-checkbox">
        <checkbox-group @change="onAllCheck">
          <checkbox :checked="allChecked">全选</checkbox>
        </checkbox-group>
      </view>
      <!-- 合计 -->
      <view class="all-price">
        合计:
        <text>￥{{ totalPrice }}</text>
      </view>
      <!-- 结算 -->
      <view class="go-pay" @click="onGoPay">去结算({{ totalNum }})</view>
    </view>
  </view>
</template>

<script>
import { mapState, mapGetters } from "vuex";

export default {
  computed: {
    ...mapState(["cartList"]),
    // 通过vuex的getters获取到总价和总数量
    ...mapGetters(["totalPrice", "totalNum"]),

    // 实现全选
    allChecked() {
      return (
        this.cartList.length && this.cartList.every((item) => item.checked)
      );
    },
  },
  methods: {
    // 点击跳转到结算页面
    onGoPay() {
      if (this.totalNum === 0) {
        // 没有选中商品，无法跳转到结算页面
        uni.showToast({
          title: "您还没有选中商品",
          icon: "none",
        });
        return;
      }
      // 跳转到支付页面
      uni.navigateTo({
        url: "/pages/pay/pay",
      });
    },
    // 实现全选
    onAllCheck() {
      const allChecked = !this.allChecked;
      const cartList = this.cartList;
      cartList.forEach((item) => {
        item.checked = allChecked;
      });
      this.$store.commit("setCartList", cartList);
    },
    // 编辑选中状态
    onGoodsCheck(index) {
      const cartList = this.cartList;
      cartList[index].checked = !cartList[index].checked;
      this.$store.commit("setCartList", cartList);
    },
    // 编辑数量
    async onNumsChange(index, val) {
      const cartList = this.cartList;
      // 判断用户是否要删除元素
      if (val === -1 && this.cartList[index].nums === 1) {
        // 用户要删除元素
        const [err, result] = await uni.showModal({
          title: "提示",
          content: "真的要将该商品从购物车中删除吗",
          showCancel: true,
          cancelText: "取消",
          cancelColor: "#000000",
          confirmText: "确定",
          confirmColor: "#3CC51F",
        });
        if (result.confirm) {
          cartList.splice(index, 1);
          this.$store.commit("setCartList", cartList);
        }
      } else {
        // 正常数据修改
        cartList[index].nums += val;
        this.$store.commit("setCartList", cartList);
      }
    },
  },
};
</script>

<style lang="scss">
.cart {
  .cart-list {
    padding: 15rpx;
    .cart-item {
      display: flex;
      .cart-chk {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        checkbox {
        }
      }

      .cart-img {
        flex: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        image {
          width: 80%;
        }
      }

      .cart-detail {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .cart-goods-name {
          font-size: 26rpx;
          color: #666;
        }

        .cart-goods-info {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .goods-price {
            font-size: 26rpx;
            color: #eb4450;
          }

          .goods-num-tool {
            display: flex;

            .num-change {
              width: 40rpx;
              height: 40rpx;
              border-radius: 50%;
              border: 1rpx solid #ccc;
              text-align: center;
              line-height: 34rpx;
              font-size: 26rpx;
              color: #666;
            }

            .num-value {
              height: 40rpx;
              margin: 0 20rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 26rpx;
              color: #666;
            }
          }
        }
      }
    }
  }
}

.cart-tool {
  border-top: 1rpx solid #ccc;
  padding: 0 20rpx;
  display: flex;
  height: 83rpx;
  align-items: center;
  color: #666;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;

  .all-checkbox {
    width: 144rpx;
    font-size: 26rpx;
    checkbox-group {
      checkbox {
      }
    }
  }

  .all-price {
    flex: 1;
    font-size: 26rpx;
    text {
      color: #eb4450;
    }
  }

  .go-pay {
    padding: 0 20rpx;
    height: 52rpx;
    background-color: #ea4350;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 26rpx;
    font-size: 22rpx;
  }
}
</style>